html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

$formFieldBorder: 1px solid #aaa;

input[type="text"], input[type="password"] {
    background: #f8f8f8;
    border: $formFieldBorder;
}

a.btn {
    text-align: center;
    text-decoration: none;
    color: #222;
    border: $formFieldBorder;

    &:hover, &:focus {
        background: #ddd;
    }
}

/* ==========================================================================
   Main CSS
   ========================================================================== */

@import "mixin";
@import "animation";

* {
    box-sizing: border-box;
}

body {
    background: url("../img/wallpaper/1.jpg") center top;
    position: fixed;
    width: 100%;
    height: 100%;
}

$deviceHeight: 700px;
$deviceWidth: 1024px;

$mainGap: 20px;
$iconFontSize: 24px;
$navMenuHeight: 40px;
$fixedIconWidth: 60px;
$fixedIconHeight: 80px;
$statusBarHeight: 40px;

.nav-menu {
    position: fixed;
    margin: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: $navMenuHeight;

    $navGap: 100px;
    a.btn {
        $left: 50px;
        position: absolute;
        left: 50%;
        margin-left: -$left;
        width: $left * 2;
        height: $navMenuHeight;
        line-height: $navMenuHeight;
        background: transparent;
        color: #FFF;
        font-size: 18px;
        border: none;
        box-shadow: none;
        border-radius: 40px;
        line-height: 40px;
        height: 40px;

        &:hover {
            background: transparent;
        }

        &.back {
            margin-left: -$left - $navGap;
        }

        &.progress {
            margin: 0 0 0 (-$left + $navGap);
        }
    }
}

$paginationHeight: 24px;
.pagination {
    position: absolute;
    left: 0;
    right: 0;
    height: $paginationHeight;
    padding: 10px 0 0;
    .icon {
        background: url("../img/pagination.png") no-repeat 0 0;
        display: inline-block;
        width: 14px;
        height: 14px;
        margin: 0 10px;

        &.active {
            background-position: 0 -14px;
        }
    }
}

.view.screen-lock {
    position: absolute;
    width: 100%;
    height: 100%;

    .bottom-menu {
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
        padding: $mainGap;
        font-size: $iconFontSize;
    }

    .clock-content {
        margin: 10% 0 0;

        .clock {
            width: 470px;
            margin: auto;
        }
    }

    .lock {
        position: absolute;
        width: $mainGap;
        height: $mainGap;
        top: $mainGap + 2px;
        left: 50%;
        margin-left: -10px;
    }
}

.view.home {

    .pagination {
        bottom: $navMenuHeight;
        line-height: 14px;
    }

    .modal {
        width: auto;
        height: $deviceHeight - $statusBarHeight - $navMenuHeight - $paginationHeight;
        top: $statusBarHeight !important;
        left: $fixedIconWidth;
        right: $fixedIconWidth;
        max-height: 100%;
        background: transparent;
        overflow: hidden;
    }

    .modal-content {
        height: 100%;
        will-change: transform;
        left: 0;
        right: 0;
        background: transparent;
    }

    .modal-trigger {
        background: transparent;
        padding: 0;
        width: $fixedIconWidth;
        box-shadow: none;
    }

    .fixed-icon-list {
        position: fixed;
        width: $fixedIconWidth;
        height: $deviceHeight - $statusBarHeight - $navMenuHeight;
        right: 0;
        top: $statusBarHeight;

        $iconGap: 10px;
        ul {
            margin: 0;
        }
        li {
            padding: 0;
            margin: $iconGap 0;

            .icon-preview {
                display: block;
                height: (($deviceHeight - $statusBarHeight - $navMenuHeight)/7) - $iconGap;
                padding: 4px;
                box-sizing: border-box;

                img {
                    width: 100%;
                }

                i {
                    font-size: 36px;
                    line-height: (($deviceHeight - $statusBarHeight - $navMenuHeight)/7) - $iconGap;
                }
            }
        }
    }

    $appGap: 15px;

    .app-board {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;

        ul {
            margin: 0;
            background: #FFF;
            height: 100%;
            width: 100%;
        }
    }

    .app {
        padding: $appGap*2;
        float: left;
        width: percentage(1/8);

        .app-content {

        }

        .app-icon {
            width: 100%;
            @include transition(all .2s);

            &.active {
                -webkit-filter: opacity(.6);
                filter: opacity(.6);
            }
        }

        .app-name {
            text-align: center;
        }
    }
}

@media all and (orientation: portrait) {
    .view.home {

        .modal {
            height: $deviceWidth - $statusBarHeight - $navMenuHeight;
            left: 16px;
            right: 16px;
        }

        .fixed-icon-list {
            width: 100%;
            height: $fixedIconHeight;
            right: 0;
            top: auto;
            bottom: $navMenuHeight + $paginationHeight;

            $iconGap: 10px;
            li {
                float: left;
                margin: 0 $iconGap;

                .icon-preview {
                    width: ($deviceHeight/7) - $iconGap * 2;
                    height: $fixedIconHeight;

                    i {
                        line-height: $navMenuHeight;
                    }
                }
            }
        }

        .app {
            width: percentage(1/5);
        }
    }
}